<template>
	<view>
		<view class="positopbgc"></view>
		<u-sticky>
			<view class="dingbu" v-if="op!=1">
				<view class="" :style="{paddingTop:80+'rpx'}" style="padding-bottom: 30rpx;">
					<view class="sanshier zhonghei textcenter fonweight">首页</view>
				</view>
			</view>
		</u-sticky>
		<u-sticky bgColor="#fff" v-if="op==1">
			<view class="" :style="{paddingTop:80+'rpx'}" style="padding-bottom: 30rpx;">
				<view class="sanshier zhonghei textcenter fonweight">首页</view>
			</view>
		</u-sticky>
		<view class="mainpadding">
			<image class="beijt" src="@/static/images/system/bjc.png" mode=""></image>
			<view class="flexbetween ssbox" style="background-color: #fff;">
				<view class="flexleft" style="width: 100%;">
					<u-icon name="search" color="#999" size="20"></u-icon>
					<input type="text" placeholder="请输入搜索内容" class="hei_text main_size bold" style="width: 100%;"
						v-model="keywords" confirm-type="search" @confirm="sousuo">
				</view>
				<view class="rightss" @click="sousuo">搜索</view>
			</view>
		</view>
		<view class="mainpadding2">
			<u-swiper :list="list1" imgMode="widthFix" keyName="image_text" height="180" indicator circular
				@click="lbtclick($event,list1)"></u-swiper>
			<view class="flexbetween radius ffffff" style="padding: 30rpx 0;">
				<view class="flexcenter ershiw"  @click="jumpurl('/pages_index/zumaiche')">
					<view class="flexcolumn">
						<image style="width: 72rpx;height: 72rpx;" src="../static/images/system/zmc.png" mode=""></image>
						<view class="smalltext textcenter" style="color: #666666;">租买车</view>
					</view>
				</view>
				<view class="flexcenter ershiw"  @click="jumpurl('/pages_index/shangjialb')">
					<view class="flexcolumn">
						<image style="width: 72rpx;height: 72rpx;" src="../static/images/system/zs.png" mode=""></image>
						<view class="smalltext textcenter" style="color: #666666;">住宿</view>
					</view>
				</view>
				<view class="flexcenter ershiw" @click="jumpurl('/pages_index/shangjialiebcy')">
					<view class="flexcolumn">
						<image style="width: 72rpx;height: 72rpx;" src="../static/images/system/cy.png" mode=""></image>
						<view class="smalltext textcenter" style="color: #666666;">餐饮</view>
					</view>
				</view>
				<view class="flexcenter ershiw" @click="jumpurl('/pages_index/shangjialbchelwh')">
					<view class="flexcolumn">
						<image style="width: 72rpx;height: 72rpx;" src="../static/images/system/clwh.png" mode=""></image>
						<view class="smalltext textcenter" style="color: #666666;">车辆维护</view>
					</view>
				</view>
			</view>
			<view class="flexbetween margin_top">
				<image src="@/static/images/system/jfdh.png" mode="" @click="jumpurl('/pages_index/jifensc')"
					class="pmitp1"></image>
				<image src="@/static/images/system/rwzx.png" mode="" @click="renwuzx" class="pmitp1"></image>
			</view>
			<view class="margin_top">
				<!-- <view class="flexcenter" :class="type==1?'itemboxs':'itembox'" @click="type=1;init()">
					<view class=" dingwei sanshier bold" :class="type==1?'xiaohuang':'xiaohui'">
						<image class="xiahx" src="@/static/images/system/ztxhx.png" mode="" v-if="type==1"></image>接送机任务
					</view>
				</view>
				<view class="flexcenter" :class="type==2?'itemboxs':'itembox'" @click="type=2;init()">
					<view class=" dingwei sanshier bold" :class="type==2?'xiaohuang':'xiaohui'">
						<image class="xiahx2" src="@/static/images/system/ztxhx.png" mode="" v-if="type==2"></image>其他任务
					</view>
				</view> -->

			</view>
			<!-- <view class="ffffff botom">
				<u-tabs :list="tabs1" lineColor="#fe8604" :activeStyle="{
				    color: '#333',
				    fontWeight: 'bold',
				    transform: 'scale(1.05)',
					fontSize:'30rpx'
				}" :inactiveStyle="{
				    color: '#999',
				    transform: 'scale(1)',
					fontSize:'30rpx'
				}" keyName="name" @click="tabclick1"></u-tabs>
				<view class="">
					<u-tabs :list="tabs" lineColor="#fe8604" :activeStyle="{
					    color: '#333',
					    fontWeight: 'bold',
					    transform: 'scale(1.05)',
						fontSize:'30rpx'
					}" :inactiveStyle="{
					    color: '#999',
					    transform: 'scale(1)',
						fontSize:'30rpx'
					}" :scrollable="false" keyName="name" @click="tabclick"></u-tabs>
				</view>

			</view> -->
			<taskList :list="list.data" :clws="clws" @init="init"></taskList>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				keywords: "",
				list1: [],
				tabsid: 0,
				tabs: [{
					id: 0,
					name: '全部',
				}, {
					id: 3,
					name: '进行中',
				}, {
					id: 4,
					name: '待审核'
				}, {
					id: 5,
					name: '已完成'
				}, ],
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				lat: "",
				lng: "",
				isLoad: false,
				type: 1, //:1=接机任务,2=其他任务
				clws: false,
				statusBarHeight: 0,
				op: 0,
				tabsid1: 1,
				tabs1: [],
			}
		},
		onLoad() {
			this.getbanner()
			this.init()
			// #ifdef APP-PLUS
			// this.getLocation()
			// #endif
			// #ifdef H5
			this.getrwlx()
			// #endif
			uni.getSystemInfo({
				success: (res) => {
					this.statusBarHeight = res.statusBarHeight
				}
			})
		},
		onPageScroll(res) {
			let top = res.scrollTop
			let height = this.statusBarHeight
			if (top <= height) {
				this.op = Math.round(top / height * 100) / 100
			} else {
				this.op = 1
			}
		},
		onShow() {
			if (this.isLoad) {
				this.init()
			}
		},
		methods: {
			lbtclick(e, list) {
				console.log(e, list);
				if (list[e].url) {
					uni.navigateTo({
						url: list[e].url
					})
				}
			},
			sousuo() {
				uni.navigateTo({
					url: "/pages_index/jifensc?keywords=" + this.keywords
				})
			},
			getbanner() { //获取轮播图
				httpRequest.request('/api/index/getAdvertiseList', 'POST', {
					advertise_position_id: 1,
					is_more: 1
				}).then(res => {
					this.list1 = res.data
				}).catch(err => {})
			},
			getLocation() {
				let _this = this
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						uni.hideLoading()
						console.log(res, "获取定位成功");
						_this.lat = res.latitude
						_this.lng = res.longitude
						_this.getrwlx()
					},
					fail(err) {
						uni.hideLoading()
						console.log(err, 23432);
					}
				});
			},
			getrwlx() {
				httpRequest.request('/api/taskcl/taskCategortyIndex', 'GET', {}, false, false, true).then(res => {
					this.tabs1 = res.data
					this.tabsid1 = res.data[0].id
					this.init()
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			init(isPage, page) {
				if (!httpRequest.checkIsLogin()) {
					this.list = {
						data: []
					}
					this.isLoad = true
					return false
				}
				let _this = this;
				let data = {
					page: page || 1,
					limit: _this.limit,
					status: this.tabsid,
					// task_category_id: this.tabsid1,
					task_category_id:"",
					lat: this.lat,
					lng: this.lng,
				}
				let url = '/api/taskcl/myTask'
				httpRequest.request(url, 'GET', data, false, false, true).then(res => {
					this.isLoad = true
					if (res.code == 1) {
						this.clws = false
						res.data.data.forEach(item => {
							this.$set(item, "iszk", false)
						})
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}
					if (res.code == -1) {
						this.clws = true
					}
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			tabclick(e) {
				this.tabsid = e.id
				this.init()
			},
			tabclick1(e) {
				this.tabsid1 = e.id
				this.init()
			},
			renwuzx() {
				uni.switchTab({
					url: "/pages/renwuzx"
				})
			},
		}
	}
</script>



<style lang="scss" scoped>
	.itemboxs {
		padding: 20rpx;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		width: 50%;
	}

	.itembox {
		width: 50%;
		padding: 20rpx;
	}

	.positopbgc {
		height: 700rpx;
		width: 100%;
		// background-image: url("https://solarmini.yuntaiqi.com/uploads/20240116/40bef5773149893a96c5181c20ced66a.png");
		background-size: 100% 100%;
		position: fixed;
		top: 0;
		bottom: 0;
		z-index: -1;
	}

	.pmitp1 {
		width: 48%;
		height: 160rpx;
	}

	.beijt {
		width: 100%;
		height: 195rpx;
		position: absolute;
		top: -30rpx;
		left: 0;
	}

	.xiahx {
		width: 150rpx;
		height: 10rpx;
		position: absolute;
		bottom: 0;
		left: 0;
	}

	.xiahx2 {
		width: 120rpx;
		height: 10rpx;
		position: absolute;
		bottom: 0;
		left: 0;
	}

	.botom {
		padding: 10rpx 0 30rpx 0;
		border-radius: 20rpx;
	}

	// .dingbu {
	// 	padding: 0 30rpx 30rpx;
	// 	background-size: 100% 100%;
	// 	width: 100%;
	// 	box-sizing: border-box;
	// 	background-color: #fff;
	// 	background-image: url('https://solarmini.yuntaiqi.com/uploads/20240116/93135388fbd8b94a0cbd2c5ffe367a0b.png');
	// }
</style>